<template>
  <div class="worker-container">
    <el-card class="worker-card">
      <h2 class="worker-title">报修管理</h2>

      <el-table :data="repairList" style="width: 100%" v-if="repairList.length > 0">
        <el-table-column label="学号" prop="studentId"></el-table-column>
        <el-table-column label="设备类型" prop="deviceType"></el-table-column>
        <el-table-column label="故障描述" prop="faultDescription"></el-table-column>
        <el-table-column label="紧急程度" prop="urgencyLevel"></el-table-column>
        <el-table-column label="报修时间" prop="createdAt"></el-table-column>
        <el-table-column label="当前状态" prop="status">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                v-if="scope.row.status === '未处理'"
                type="primary"
                @click="updateStatus(scope.row.id, '处理中')"
            >处理中</el-button>
            <el-button
                v-if="scope.row.status === '处理中'"
                type="success"
                @click="updateStatus(scope.row.id, '已解决')"
            >已解决</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div v-else class="no-repair">暂无待处理报修</div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      repairList: []
    };
  },
  methods: {
    async fetchRepairList() {
      try {
        const response = await axios.get('http://localhost:3000/worker/repairs', {
          headers: {
            Authorization: localStorage.getItem('workerToken') // 从localStorage获取token
          }
        })
        this.repairList = response.data;
      } catch (err) {
        this.$message.error("获取报修列表失败");
      }
    },
    async updateStatus(repairId, newStatus) {
      try {
        const response = await axios.put(`http://localhost:3000/worker/repair/${repairId}`,
            { status: newStatus },
            {
              headers: {
                Authorization: localStorage.getItem('workerToken'), // 添加token到请求头
              },
            }
        );
        this.$message.success(response.data.message);
        this.fetchRepairList();  // 更新列表
      } catch (err) {
        this.$message.error("更新报修状态失败");
      }
    },
    getStatusType(status) {
      if (status === "未处理") return "warning";
      if (status === "处理中") return "info";
      if (status === "已解决") return "success";
    }
  },
  mounted() {
    this.fetchRepairList();
  }
};
</script>

<style scoped>
.worker-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.worker-card {
  width: 80%;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.worker-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.el-table {
  margin-top: 20px;
}

.no-repair {
  text-align: center;
  color: #888;
}
</style>
